{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify simpletags%}

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{{ media }}

{% endblock %}
{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>
{#<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"#}
{#      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"#}
{#      crossorigin="anonymous">#}

    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}"/>
    <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
{% endblock %}

{% block content %}
    <style type="text/css" >
        /* 打印样式 */
        @media print {
            .no-print {
                display: none !important;
            }
            body {
                font-family: SimSun, serif;
                font-size: 12px;
            }
            .report-header {
                text-align: center;
                margin-bottom: 20px;
            }
            .report-table {
                width: 100%;
                border-collapse: collapse;
            }
            .report-table th, .report-table td {
                border: 1px solid #000;
                padding: 6px 8px;
                text-align: center;
            }
            .report-footer {
                margin-top: 20px;
                text-align: right;
            }
        }
        /* 屏幕预览样式 */
        .print-button {
            margin: 20px 0;
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        /* 可选：调整下拉框本身的高度，与 option 匹配 */
        #reportStyleSelect {
            height: 50px; /* 下拉框自身高度，可根据 option 样式微调 */
            padding: 8px 12px;
        }
    </style>

<div id="content-main" class="form-main">

    <div class="page-header">
        <el-page-header title="{% trans 'Back' %}" @back="goBack" content="{{'打印报表-'}}{{ title }}"/>
    </div>
<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">报表样式</label>
  </div>
<!-- 1. 隐藏的POST表单 -->
<form id="postForm" method="POST" action="/print/" target="_blank">
    {%csrf_token%}
    <input name="report_type" type="hidden" value="{{ report_type }}">
  <div class="col-lg-3 col-md-6">
      <select name="report_style" class="form-select" aria-label="Default select example" id="reportStyleSelect">
          {% for report in reports %}
              <option value="{{ report.report_file }}" data-name="{{ report.report_name }}">{{ report.report_name }}</option>
          {% endfor %}
            <!-- 若没有报表数据，显示“无可用样式”并禁用下拉框 -->
            {% if not reports %}
                <option value="" disabled>无可用报表样式，请先创建</option>
            {% endif %}

</select>
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      选择合适的打印样式.
    </span>
  </div>


  <!-- 传递POST参数（可选） -->
  <input type="hidden" name="user_id" value="{{ request.user.id }}">
   <input type="hidden" name="objects" value="{% for obj in objects %}{{ obj.id }}、 {% endfor %}">
     {% for name,value in parms.items %}
         {% if name != 'csrfmiddlewaretoken' %}
        <input  type="hidden" name="{{ name }}" value="{{ value|safe }} ">
         {% endif %}
        {% endfor %}
   <input type="hidden" name="model" value="{{ model }}">
    <!-- 新增：用于接收用户输入的报表名称（动态添加值） -->
    <input type="hidden" name="report_name" id="reportNameInput">
    <input  type="hidden" name="fileds" value="{% if fileds %}{{ fileds }} {% else %}{{ '[]' }} {% endif %} ">
</form>
<div class="row g-3 align-items-center" >
    <div class="col-auto">
<!-- 2. 可点击的a标签 -->
<button  class="print-button no-print" onclick="reportPreview();"  >
  打印预览
</button>
    </div>
    <div class="col-auto">
    <!-- 仅在屏幕上显示的打印按钮 -->
    <button class="print-button no-print" onclick="reportPrint()">直接打印报表</button>
        </div>
    <div class="col-auto">
    <button  class="print-button no-print" onclick="designReport();"  >
         报表设计
</button>
        <button  class="print-button no-print" onclick="createReport();"  >
         新增报表模版
</button>
        <button  class="print-button no-print" onclick="alterReportName();"  >
         修改报表名称
</button>
    </div>
    </div>
    <!-- 报表内容 -->
    <div class="report-header">
        <h2>{{ title }}</h2>
        <p>打印时间: {% now "Y年m月d日 H:i:s" %}</p>
    </div>



    <script type="text/javascript">
    new Vue({
        el: '.page-header',
        methods: {
            goBack: function () {
                {#window.location.href = '{% get_previous_url %}'#}
                {# window.history.back(); // 或跳转到指定 URL#}
                // 1. 获取当前页面的完整URL路径（如 "/admin/base/rawmodel/print/"）
            const currentPath = window.location.pathname;

            // 2. 拆分路径为数组（按 "/" 分割，过滤空值）
            // 示例：currentPath → ["admin", "base", "rawmodel", "print"]
            const pathParts = currentPath.split('/').filter(part => part);

            // 3. 移除最后一段（即“print”），得到上一级路径
            // 示例：pathParts.slice(0, -1) → ["admin", "base", "rawmodel"]
            const parentParts = pathParts.slice(0, -1);

            // 4. 拼接成上一级URL（如 "/admin/base/rawmodel/"）
            const parentUrl = '/' + parentParts.join('/') + '/';

            // 5. 跳转到上一级
            window.location.href = parentUrl;
            }
        }
    });
    // 修正函数定义：使用标准函数声明，去掉错误的 => 语法
    function checkReportStyle() {
    // 获取下拉框元素
    const reportSelect = document.querySelector('select[name="report_style"]');
    // 获取选中的值（去空格）
    const selectedStyle = reportSelect.value.trim();

    // 校验1：无可用报表样式（下拉框只有“无可用样式”选项）
    if (!reportSelect.options.length || (reportSelect.options.length === 1 && reportSelect.options[0].value === "")) {
        alert("暂无可用的报表样式，请先在【报表设计】中创建样式！");
        return false;
    }

    // 校验2：已选择“请选择报表样式”的空选项
    if (!selectedStyle) {
        alert("请先选择一个报表样式再打印！");
        // 聚焦到下拉框，引导用户选择
        reportSelect.focus();
        return false;
    }

    // 校验通过
    return true;
}
    // 报表设计按钮逻辑（若需跳转设计页面，修改此处 URL）
    function designReport() {
        // 先校验样式，不通过则不提交
       if (!checkReportStyle()) return;
       // 2. 获取当前选中的报表样式和原名称
        const reportSelect = document.getElementById('reportStyleSelect');
        const selectedOption = reportSelect.options[reportSelect.selectedIndex];
        const originalName = selectedOption.getAttribute('data-name'); // 原名称
        document.getElementById("reportNameInput").value = originalName.trim();
        const form = document.getElementById('postForm');
        // 若报表设计接口不同，修改 action
        form.action = "/report/design/";
        form.submit();
    }
    function createReport() {

        // 弹出输入框获取报表名称（第二个参数为默认提示文本）
        const reportName = prompt("请输入报表名称：", "例如：月度销售报表");

        // 判断用户是否输入（取消时返回null，空字符串视为未输入）
        if (!reportName || reportName.trim() === "") {
            alert("报表名称不能为空！");
            return; // 不提交表单
        }

        // 将用户输入的名称赋值给隐藏字段
        document.getElementById("reportNameInput").value = reportName.trim();
        const form = document.getElementById('postForm');

        form.action = "/report/create/";
        form.method = "post"; // 明确指定POST方法（避免默认GET导致令牌丢失）
        form.target = "_self"; // 在新窗口打开后端返回的HTML
        form.submit();

    }
    function reportPreview() {
         // 先校验样式，不通过则不提交
       if (!checkReportStyle()) return;

        const form = document.getElementById('postForm');
        // 若报表设计接口不同，修改 action
        form.action = "/print/";
        form.submit();
    }
    function reportPrint() {
         // 先校验样式，不通过则不提交
       if (!checkReportStyle()) return;

        const form = document.getElementById('postForm');
        // 若报表设计接口不同，修改 action
        form.action = "/print/now";
        form.submit();
    }

    // 新增：修改报表名称函数
        function alterReportName() {
            // 1. 校验是否选择了报表样式
            if (!checkReportStyle()) return;

            // 2. 获取当前选中的报表样式和原名称
            const reportSelect = document.getElementById('reportStyleSelect');
            const selectedOption = reportSelect.options[reportSelect.selectedIndex];
            const originalName = selectedOption.getAttribute('data-name'); // 原名称
            const reportStyle = selectedOption.value; // 报表样式标识

            // 3. 弹出输入框，默认显示原名称
            const newName = prompt("请输入修改后的报表名称：", originalName);

            // 4. 校验输入（取消或空值则终止）
            if (newName === null) {
                // 用户点击取消
                return;
            }
            if (newName.trim() === "") {
                alert("报表名称不能为空！");
                return;
            }
            if (newName.trim() === originalName.trim()) {
                alert("新名称与原名称一致，无需修改！");
                return;
            }

            // 5. 赋值参数并提交表单
            document.getElementById("reportNameInput").value = newName.trim(); // 新名称
            const form = document.getElementById('postForm');
            form.action = "/print/altername/"; // 提交到修改接口
            form.submit();
        }
    // 可选：页面加载完成后，自动聚焦报表样式选择框
    window.onload = function() {
        document.getElementById('report_style').focus();
    }




</script>
{% endblock %}